<template>
  <el-dialog
    v-model="centerDialogVisible"
    :title="t('logger.db.detailTitle')"
    align-center
    width="90%"
    destroy-on-close
    :close-on-click-modal="false"
  >
    <el-tabs type="border-card">
      <el-tab-pane :label="t('logger.db.detailTitle')">
        <el-form label-position="top">
          <el-row>
            <el-col :span="2">
              <el-form-item :label="t('logger.db.exeType')">
                <span class="value">
                  <template v-if="dbLog?.exeType == 'INSERT'">
                    <el-tag type="success">{{ t('logger.db.insert') }}</el-tag>
                  </template>
                  <template v-else-if="dbLog?.exeType == 'UPDATE'">
                    <el-tag type="warning">{{ t('logger.db.update') }}</el-tag>
                  </template>
                  <template v-else-if="dbLog?.exeType == 'DELETE'">
                    <el-tag type="danger">{{ t('logger.db.delete') }}</el-tag>
                  </template>
                </span>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item :label="t('logger.db.dbTable')">
                <span class="value">{{ dbLog?.dbTable }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item :label="t('logger.db.tabComment')">
                <span class="value">{{ dbLog?.tabComment }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="2">
              <el-form-item :label="t('logger.request.userName')">
                <span class="value">{{ dbLog?.userName }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item :label="t('logger.request.orgId')">
                <span class="value"> {{ dbLog?.orgId }}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item :label="t('logger.db.exeSql')">
                <CodeInput
                  v-model="dbLog.exeSql"
                  type="json"
                  :readonly="true"
                  style="height: 400px; width: 100%"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item :label="t('logger.db.exeSqlFormat')">
                <CodeInput
                  v-model="dbLog.exeSqlFormat"
                  type="json"
                  :readonly="true"
                  style="height: 400px; width: 100%"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-tab-pane>

      <el-tab-pane :label="t('logger.db.title')">
        <el-table
          :data="dataUpdates"
          style="height: 530px"
          :show-overflow-tooltip="true"
          :highlight-current-row="true"
        >
          <el-table-column prop="exeType" :label="t('logger.db.exeType')" width="100">
            <template #default="scope">
              <template v-if="scope.row.exeType == 'INSERT'">
                <el-tag type="success">{{ t('logger.db.insert') }}</el-tag>
              </template>
              <template v-else-if="scope.row.exeType == 'UPDATE'">
                <el-tag type="warning">{{ t('logger.db.update') }}</el-tag>
              </template>
              <template v-else-if="scope.row.exeType == 'DELETE'">
                <el-tag type="danger">{{ t('logger.db.delete') }}</el-tag>
              </template>
            </template>
          </el-table-column>
          <el-table-column prop="userName" :label="t('logger.db.userName')" width="180" />
          <el-table-column prop="orgId" :label="t('logger.db.orgId')" width="250" />
          <el-table-column prop="columnName" :label="t('logger.db.columnName')" width="250" />
          <el-table-column prop="colComment" :label="t('logger.db.colComment')" />
          <el-table-column prop="oldValue" :label="t('logger.db.oldValue')" width="150" />
          <el-table-column prop="newValue" :label="t('logger.db.newValue')" width="150" />
          <el-table-column prop="logTime" :label="t('logger.db.logTime')" width="180" />
        </el-table>
      </el-tab-pane>
      <el-tab-pane :label="t('logger.db.lifeCycleTitle')">
        <el-table
          :data="lifeCycles"
          style="height: 530px"
          :show-overflow-tooltip="true"
          :highlight-current-row="true"
        >
          <el-table-column prop="exeType" :label="t('logger.db.exeType')" width="100">
            <template #default="scope">
              <template v-if="scope.row.exeType == 'INSERT'">
                <el-tag type="success">{{ t('logger.db.insert') }}</el-tag>
              </template>
              <template v-else-if="scope.row.exeType == 'UPDATE'">
                <el-tag type="warning">{{ t('logger.db.update') }}</el-tag>
              </template>
              <template v-else-if="scope.row.exeType == 'DELETE'">
                <el-tag type="danger">{{ t('logger.db.delete') }}</el-tag>
              </template>
            </template>
          </el-table-column>
          <el-table-column prop="userName" :label="t('logger.db.userName')" width="180" />
          <el-table-column prop="orgId" :label="t('logger.db.orgId')" width="250" />
          <el-table-column prop="dbTable" :label="t('logger.db.dbTable')" width="250" />
          <el-table-column prop="tabComment" :label="t('logger.db.tabComment')" />
          <el-table-column prop="logTime" :label="t('logger.db.logTime')" width="180" />
          <el-table-column prop="logTime" :label="t('common.operate')" width="80">
            <template #default="scope">
              <el-button @click="lifeCycleShow(scope.row.id)" type="primary" size="small">{{
                t('common.detail')
              }}</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane :label="t('logger.request.detailParams')">
        <el-form label-position="top">
          <el-row>
            <el-col :span="2">
              <el-form-item :label="t('logger.request.requestMethod')">
                <span class="value">{{ requestLog?.requestMethod }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="2">
              <el-form-item :label="t('logger.db.dbTable')">
                <span class="value">{{ requestLog?.dbTable }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item :label="t('logger.request.name')">
                <span class="value">{{ requestLog?.name }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item :label="t('logger.request.url')">
                <span class="value"> {{ requestLog?.url }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="2">
              <el-form-item :label="t('logger.request.userName')">
                <span class="value">{{ requestLog?.userName }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item :label="t('logger.request.orgId')">
                <span class="value"> {{ requestLog?.orgId }}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item :label="t('logger.request.headData')">
                <CodeInput
                  v-model="requestLog.headData"
                  type="json"
                  :readonly="true"
                  style="height: 200px; width: 100%"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item :label="t('logger.request.requestParams')">
                <CodeInput
                  v-model="requestLog.requestParams"
                  type="json"
                  :readonly="true"
                  style="height: 200px; width: 100%"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item :label="t('logger.request.requestBody')">
                <CodeInput
                  v-model="requestLog.requestBody"
                  type="json"
                  :readonly="true"
                  style="height: 200px; width: 100%"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item :label="t('logger.request.responseBody')">
                <CodeInput
                  v-model="requestLog.responseBody"
                  type="json"
                  :readonly="true"
                  style="height: 200px; width: 100%"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-tab-pane>
    </el-tabs>
    <db-log-detail ref="dbLogDetail2" />
  </el-dialog>
</template>
<script setup lang="ts">
import { getApi, getColumnsApi, loadLifeCycleApi } from '@/api/logger/dblog'
import { getApi as getRequestApi } from '@/api/logger/requestlog'
import { useI18n } from '@/hooks/web/useI18n'
import { ref } from 'vue'
import { CodeInput } from '@/components/CodeMirror'
// @ts-ignore
import { format as sqlFormat } from 'sql-formatter'

const centerDialogVisible = ref(false)
const { t } = useI18n()

const dbLog = ref<any>({
  exeSql: '',
  exeSqlFormat: ''
})

const loadDbLog = async (id: string) => {
  const rs = await getApi({ id })
  if (rs.success) {
    const data = rs.data
    console.log(data.exeParams)
    const params = JSON.parse(data.exeParams)
    params.forEach((val, idx) => {
      if (typeof val == 'string') {
        params[idx] = "'" + val + "'"
      } else {
        params[idx] = val + ''
      }
    })
    data.exeSql = sqlFormat(data.exeSql, {
      tabWidth: 2,
      keywordCase: 'upper',
      linesBetweenQueries: 2
    })
    data.exeSqlFormat = sqlFormat(data.exeSql, {
      params: params,
      tabWidth: 2,
      keywordCase: 'upper',
      linesBetweenQueries: 2
    })
    dbLog.value = data
    loadLifeCycles()
    loadRequestLog()
  }
}

const dataUpdates = ref([])

const loadDataUpdatas = async (tlId: string) => {
  const rs = await getColumnsApi({ tlId })
  if (rs.success) {
    dataUpdates.value = rs.data
  }
}

const show = async (id: string) => {
  loadDbLog(id)
  loadDataUpdatas(id)
  centerDialogVisible.value = true
}

//关闭表单
const hide = () => {
  centerDialogVisible.value = false
}

const dbLogDetail2 = ref()

const lifeCycleShow = (id) => {
  dbLogDetail2.value.show(id)
}

const lifeCycles = ref<any>([])

const loadLifeCycles = async () => {
  const rs = await loadLifeCycleApi({ primaryVerValue: dbLog.value.primaryVerValue })
  if (rs.success) {
    lifeCycles.value = rs.data
  }
}

const requestLog = ref<any>({
  headData: '{}',
  requestParams: '{}',
  requestBody: '{}',
  responseBody: '{}'
})

const loadRequestLog = async () => {
  const rs = await getRequestApi({ id: dbLog.value.requestId })
  if (rs.success) {
    const data = rs.data
    data.headData = JSON.stringify(JSON.parse(data.headData), null, 2)
    data.requestParams = JSON.stringify(JSON.parse(data.requestParams), null, 2)
    data.requestBody = JSON.stringify(JSON.parse(data.requestBody), null, 2)
    data.responseBody = JSON.stringify(JSON.parse(data.responseBody), null, 2)
    requestLog.value = data
  }
}

//暴露方法
defineExpose({ show, hide })
</script>
<style scoped lang="less"></style>
